Color Roles 顏色角色

色彩角色類似數字填色畫布中的數字，它們連線使用者介面元素與其對應的顏色。

對映到 Material 元件確保 UI 統一。無論使用靜態或動態配色，都需要應用這些色彩角色，包括自定義元件。

提供至少 3:1 的對比度，確保色彩組合易於識別，增強可訪問性。

設計令牌標準化程式碼中的顏色角色，作為設計系統視覺風格的可複用基礎。

General concepts 基本概念

以下是您在顏色角色命名中會看到的重要術語：

Surface 表面 – 用於背景和螢幕上大面積、低強調區域的角色。

Primary, Secondary, Tertiary 主要色、次要色、第三級色 – 用於強調或弱化前景元素的重點色彩角色。

Container 容器 – 用作按鈕等前景元素填充色的角色。不應用於文字或圖示。

On 疊加 – 以此術語開頭的角色表示文字或圖示在其配對父色之上方使用的顏色。例如，on primary用於primary填充色上的文字和圖示。

Variant 變體 – 以此術語結尾的角色提供比非變體配對更低強排程的替代方案。例如，outline variant是outline顏色的低強調版本。

Pairing and layering colors 色彩搭配與分層

✓ 合適的顏色角色配對和分層可確保良好的視覺效果和可訪問性。正確示例中的按鈕使用主色和次級容器色及其對應的前景色，即使在不同對比度下也保持清晰可讀。

× 使用了不當的顏色組合（主色、主容器色、次級容器色和表面前景色），導致對比度變化時內容難以辨認，降低了可用性。

Primary 主要顏色

在整個使用者介面（UI）中，對最突出的元件（如懸浮操作按鈕、高強調按鈕和活動狀態）使用主要角色。

Primary（主色）：用於介面中強調內容的填充色、文字和圖示，通常與表面色（surface）形成強烈對比。

On Primary（主色前景）：應用於主色背景上的文字和圖示，確保資訊在主色背景下清晰可讀。

Primary Container（主色容器）：在介面中用作突出顯示關鍵元件（如FAB按鈕）的填充色，常與表面色形成明顯區分。

On Primary Container（主色容器前景）：用於主色容器中的文字和圖示，保證其在容器背景下保持可讀性。

Secondary 次要顏色

使用次要角色來表示使用者介面中不太突出的元件，比如篩選標籤。

Secondary（次色）：用於介面中的輔助內容，通常作為次要文字、填充色或圖示，與表面色形成適度對比。

On Secondary（次色前景）：用於次色背景上的文字和圖示，保證其在次色背景下易於識別。

Secondary Container（次級容器）：為介面中次要功能元件（如色調按鈕）提供填充色，突出輔助內容。

On Secondary Container（次級容器前景）：用於次級容器中的文字和圖示，確保在背景下清晰可辨。

Tertiary 輔助顏色

使用第三角色來形成對比色調，以平衡主色和輔色，或者將注意力更集中到某個元素上，比如輸入框。

Tertiary（輔助色）：用作補充主色和次色的輔助色，通常用於具有輔助功能的文字、填充色和圖示。

On Tertiary（輔助色前景）：應用於輔助色背景上的文字和圖示，確保內容在輔助色下具備良好可讀性。

Tertiary Container（輔助容器）：為輸入框、卡片等輔助元件提供與表面色對比的背景色。

On Tertiary Container（輔助容器前景）：用於輔助容器內的文字和圖示，保證在輔助容器背景下易於閱讀。

Error 錯誤顏色

使用錯誤角色來傳達錯誤狀態，比如在文字欄位中輸入了錯誤的密碼。

Error（錯誤色）：用於表示錯誤或緊急資訊的高對比顏色，常用於錯誤提示、錯誤圖示或錯誤文字。

On Error（錯誤前景色）：用於顯示在錯誤色背景上的文字和圖示，確保錯誤提示資訊易讀。

Error Container（錯誤容器色）：為強調錯誤內容的背景色，通常用在錯誤相關的卡片或區域。

On Error Container（錯誤容器前景色）：用於錯誤容器中的文字和圖示，保證其在容器背景下可識別。

Surface 表面顏色

使用表面角色來設定更中性的背景，併為卡片、表單和對話方塊等元件設定容器顏色。

三種表面角色：

Surface（表面色）：用作介面的預設背景顏色，提供基礎的視覺承載空間。

On Surface（表面前景色）：顯示在表面色上的文字和圖示，確保內容在背景上清晰可見。

On Surface Variant（表面變體前景色）：低強調的前景色，用於次要內容和輔助性資訊。

五個基於其強調程度命名的表面容器角色：表面容器是預設角色，其他容器則用於建立擴充套件布局中的層次結構。

Surface Container Lowest（最低層容器色）：最低強調的背景色，通常用於頁面的最底層區域。

Surface Container Low（低層容器色）：較低強調的背景色，用於次要內容的承載區。

Surface Container（預設容器色）：預設的容器背景色，適用於大多數內容區。

Surface Container High（高層容器色）：較高強調的容器色，通常用於需要吸引使用者注意的區域。

Surface Container Highest（最高層容器色）：最高強調的容器色，通常用於關鍵內容和互動區域。

1 surface 表面色 2 surface container 表面容器色：最常見的表層角色組合是將表層用作背景區域，將表層容器用作導航區域。

1 surface 表面色 2 surface container 表面容器色：所有顏色對映——尤其是表面顏色——在不同視窗尺寸類別下的佈局區域應保持一致。例如，在手機和平板電腦上，主體區域都將使用表面顏色，導航區域都將使用表面容器顏色。

根據必要的層次結構、功能區域和設計邏輯，只要顏色應用保持一致，你可以在較大的視窗類尺寸中使用附加的表面顏色。

中性色元件如導航欄、選單和對話方塊預設對映到特定表面容器角色，但可根據需求重新對映。

各種元件使用的顏色層級：1 Surface container low表面顏色底部 2 Surface container 表面容器 3 Surface container high 表面容器高 4 Surface container highest 表面容器最高

反向顏色（Inverse Colors）

反向顏色用於建立對比，提升可讀性。

Inverse surface：反向背景色，與表面色形成對比

Inverse on surface：在反向背景上的文字和圖示色

Inverse primary：用於反向背景上的互動元素，如反向表面上的按鈕

Outline Colors 輪廓顏色

Outline：主要邊框/分隔線顏色

Outline Variant：低強調邊框/分隔線，適用於輔助資訊

× 分隔線不應使用 Outline 顏色，因為對比度要求不同，建議使用 Outline Variant 以確保可讀性。

× 相鄰的標籤、按鈕等 UI 元素不應使用 Outline Variant 顏色，應使用 Outline 或其他高對比度顏色，以避免視覺模糊。

× 卡片等包含多個元素的元件不應使用 Outline 顏色，應使用 Outline Variant 以維持層次感和可區分性。

× 不應使用 Outline Variant 顏色來劃分層級或界定互動邊界，應使用 Outline 或 3:1 對比度的顏色，確保清晰度。

Add-on Color Roles 附加顏色

大多數產品不需要這些附加顏色角色。某些產品可能需要它們提供的額外靈活性，但如果你不確定是否需要使用，那就可以忽略它們。

固定強調色（ Fixed Accent Colors）

固定色保證不同主題下的色彩一致性，固定減弱色提供更深的對比效果，可替代常規容器角色用於特殊場景。

左：

如果你希望顏色能隨著模式變化，適應深色/淺色主題，用 Primary Container。

Fixed Accent Colors 固定強調色

On Fixed 和 On Fixed Variant 是跨主題保持顏色一致的前景色，用於根據內容重要性選擇高或低強調的文字和圖示顏色

Primary Fixed Variant：用於低強調文字。On Primary Fixed：用於高強調文字。

Bright and Dim Surface Roles 亮色與暗色表面角色

Surface Dim 表面暗色：亮色和暗色主題中最暗的表面顏色

Surface Bright 表面亮色：亮色和暗色主題中最亮的表面顏色

兩套配色方案提供不同的亮度調整策略，避免介面切換時亮度變化過大，提高使用者體驗

導航欄使用 Surface Dim 背景。聊天視窗使用 Surface Bright 背景。